<!doctype html>
<html lang="en">
<head>
    <title>Grid - Preventing formatting and hovering</title>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="description" content="" />
    <meta name="keywords" content="" />
    <meta name="author" content="ComponentOne" />
    
    <link href="../../themes/rocket/jquery-wijmo.css" rel="stylesheet" type="text/css"/>
    <link href="../../themes/wijmo/jquery.wijmo-open.2.3.2.css" rel="stylesheet" type="text/css" />
    <link href="../../themes/wijmo/jquery.wijmo.wijgrid.css" rel="stylesheet" type="text/css" />

    <script src="../../external/jquery-1.8.2.min.js" type="text/javascript"></script>
    <script src="../../external/jquery-ui-1.9.1.custom.min.js" type="text/javascript"></script>
    <script src="../../external/globalize.min.js" type="text/javascript"></script>
    <script src="../../external/jquery.mousewheel.min.js" type="text/javascript"></script>

    <script src="../../external/jquery.wijmo-open.all.2.3.2.min.js" type="text/javascript"></script>
    <script src="../../wijmo/jquery.wijmo.wijdatasource.js" type="text/javascript"></script>
    <script src="../../wijmo/jquery.wijmo.wijgrid.js" type="text/javascript"></script>

    <script id="scriptInit" type="text/javascript">
      $(document).ready(function () {
          $("#demo").wijgrid({
              showRowHeader: true,
              cellStyleFormatter: function(args) {
                  if (args.state & $.wijmo.wijgrid.renderState.current) {
                      args.$cell.removeClass("ui-state-active wijmo-wijgrid-current-headercell wijmo-wijgrid-current-cell");
                  }
              },
              rowStyleFormatter: function(args) {
                  var rs = $.wijmo.wijgrid.renderState;

                  if (args.state & rs.hovered) {
                      args.$rows.removeClass("ui-state-hover");
                  } 

                  if (args.state & rs.current) {
                  	args.$rows.find("td:first").removeClass("ui-state-active wijmo-wijgrid-current-rowheadercell");
                  }
              }
          });
      });
    </script>
</head>
<body class="demo-single">
    <div class="container">
        <div class="header">
            <h2>
                Preventing formatting and hovering</h2>
        </div>
        <div class="main demo">
            <!-- Begin demo markup -->
            <table id="demo">
                <thead>
                    <tr>
                        <th>ProductID</th><th>UnitPrice</th><th>Quantity</th><th>Discount</th><th>Discontinued</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>11</td><td>14</td><td>12</td><td>0</td><td>false</td>
                    </tr><tr>
                        <td>42</td><td>9.8</td><td>10</td><td>0</td><td>false</td>
                    </tr><tr>
                        <td>72</td><td>34.8</td><td>5</td><td>0</td><td>false</td>
                    </tr><tr>
                        <td>14</td><td>18.6</td><td>9</td><td>0</td><td>false</td>
                    </tr><tr>
                        <td>35</td><td>12.1</td><td>5</td><td>0.5</td><td>true</td>
                    </tr>
                </tbody>
            </table>
            <!-- End demo markup -->
            <div class="demo-options">
            <!-- Begin options markup -->
                
            <!-- End options markup -->
            </div>
        </div>
        <div class="footer demo-description">
		This sample demonstrates how to prevent formatting of the current position and hovering using <b>cellStyleFormatter</b> and <b>rowStyleFormatter</b>.
        </div>
    </div>
</body>
</html>
